<template>
  <div class="tabs-view">
    <!-- 标签页导航 -->
    <div class="tabs-nav">
      <div class="tabs-list">
        <div 
          v-for="tab in tabs" 
          :key="tab.path"
          class="tab-item"
          :class="{ active: $route.path === tab.path }"
          @click="switchTab(tab.path)"
          @contextmenu.prevent="showContextMenu($event, tab)"
        >
          <span class="tab-title">{{ tab.title }}</span>
          <button 
            v-if="tab.closable" 
            @click.stop="closeTab(tab.path)"
            class="tab-close"
          >
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 标签页操作按钮 -->
      <div class="tabs-actions">
        <button 
          @click="showTabsMenu = !showTabsMenu"
          class="tabs-menu-btn"
          ref="tabsMenuBtn"
        >
          <svg viewBox="0 0 24 24">
            <path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"/>
          </svg>
        </button>
        
        <!-- 标签页菜单 -->
        <div 
          v-if="showTabsMenu" 
          class="tabs-menu"
          v-click-outside="hideTabsMenu"
        >
          <div @click="closeOtherTabs" class="menu-item">关闭其他</div>
          <div @click="closeAllTabs" class="menu-item">关闭所有</div>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div 
      v-if="contextMenu.show" 
      class="context-menu"
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
      v-click-outside="hideContextMenu"
    >
      <div @click="closeTab(contextMenu.tab.path)" class="menu-item">关闭标签</div>
      <div @click="closeOtherTabs(contextMenu.tab.path)" class="menu-item">关闭其他</div>
      <div @click="closeAllTabs" class="menu-item">关闭所有</div>
    </div>

    <!-- 页面内容 -->
    <div class="tab-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTabsStore } from '../stores/tabs'

const router = useRouter()
const route = useRoute()
const tabsStore = useTabsStore()

const showTabsMenu = ref(false)
const contextMenu = ref({
  show: false,
  x: 0,
  y: 0,
  tab: null
})

const { tabs, activeTab, removeTab, setActiveTab } = tabsStore

// 切换标签页
const switchTab = (path) => {
  setActiveTab(path)
  router.push(path)
}

// 监听路由变化，同步标签页活跃状态
watch(() => route.path, (newPath) => {
  if (newPath) {
    setActiveTab(newPath)
  }
}, { immediate: true })

// 关闭标签页
const closeTab = (path) => {
  const targetIndex = tabs.findIndex(tab => tab.path === path)
  
  if (targetIndex === -1) return
  
  // 如果关闭的是当前活跃标签页，需要切换到其他标签页
  if (activeTab.value === path) {
    let nextPath
    if (tabs.length > 1) {
      if (targetIndex > 0) {
        nextPath = tabs[targetIndex - 1].path
      } else {
        nextPath = tabs[targetIndex + 1].path
      }
      router.push(nextPath)
      setActiveTab(nextPath)
    }
  }
  
  removeTab(path)
  hideContextMenu()
}

// 关闭其他标签页
const closeOtherTabs = (keepPath = activeTab.value) => {
  tabsStore.closeOtherTabs(keepPath)
  router.push(keepPath)
  hideTabsMenu()
  hideContextMenu()
}

// 关闭所有标签页
const closeAllTabs = () => {
  tabsStore.closeAllTabs()
  router.push('/dashboard')
  hideTabsMenu()
  hideContextMenu()
}

// 显示右键菜单
const showContextMenu = (event, tab) => {
  contextMenu.value = {
    show: true,
    x: event.clientX,
    y: event.clientY,
    tab
  }
}

// 隐藏右键菜单
const hideContextMenu = () => {
  contextMenu.value.show = false
}

// 隐藏标签页菜单
const hideTabsMenu = () => {
  showTabsMenu.value = false
}

// 点击外部关闭菜单的指令
const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value()
      }
    }
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}
</script>

<style scoped>
.tabs-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 标签页导航 */
.tabs-nav {
  display: flex;
  align-items: center;
  background: #fafbfc;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 16px;
  height: 40px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tabs-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabs-list::-webkit-scrollbar {
  height: 3px;
}

.tabs-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 32px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  user-select: none;
  position: relative;
  border-bottom: 2px solid transparent;
}

.tab-item:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  border-color: #d9d9d9;
}

.tab-item.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.tab-item.active {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-color: #3498db;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
  transform: translateY(-1px);
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #3498db;
}

.tab-title {
  font-size: 14px;
  color: #595959;
  margin-right: 8px;
  transition: all 0.3s ease;
  font-weight: 400;
}

.tab-item.active .tab-title {
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #8c8c8c;
}

.tab-close:hover {
  background: #ff4d4f;
  color: white;
}

.tab-item.active .tab-close {
  color: rgba(255, 255, 255, 0.8);
}

.tab-item.active .tab-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.tab-close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* 标签页操作 */
.tabs-actions {
  position: relative;
  margin-left: 16px;
}

.tabs-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: #8c8c8c;
  transition: all 0.3s ease;
}

.tabs-menu-btn:hover {
  background: #f0f0f0;
  color: #595959;
  transform: scale(1.05);
}

.tabs-menu-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 菜单样式 */
.tabs-menu,
.context-menu {
  position: absolute;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 120px;
  padding: 4px 0;
}

.tabs-menu {
  top: 100%;
  right: 0;
  margin-top: 4px;
}

.context-menu {
  position: fixed;
}

.menu-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #262626;
  cursor: pointer;
  transition: background 0.3s ease;
}

.menu-item:hover {
  background: #f0f0f0;
}

/* 页面内容 */
.tab-content {
  flex: 1;
  overflow-y: auto;
  background: #f0f2f5;
  padding: 24px;
}
</style> 